<script setup>
import { ref } from 'vue'

const units = ref([
  { creditCode: '91310000123456789A', name: '上海星河科技有限公司', contact: '021-66668888' },
  { creditCode: '91440300X1Y2Z3A4B5', name: '深圳海纳百川信息科技', contact: '0755-12345678' }
])

const modalOpen = ref(false)
const editingIndex = ref(-1)
const form = ref({ creditCode: '', name: '', contact: '' })

const openAdd = () => {
  editingIndex.value = -1
  form.value = { creditCode: '', name: '', contact: '' }
  modalOpen.value = true
}
const openEdit = (idx) => {
  editingIndex.value = idx
  form.value = { ...units.value[idx] }
  modalOpen.value = true
}
const save = () => {
  if (editingIndex.value === -1) {
    units.value.unshift({ ...form.value })
  } else {
    units.value[editingIndex.value] = { ...form.value }
  }
  modalOpen.value = false
}
const remove = (idx) => {
  units.value.splice(idx, 1)
}
</script>

<template>
  <div class="card">
    <h2>参保单位管理</h2>
    <div class="toolbar">
      <button class="primary" @click="openAdd">新增单位</button>
    </div>

    <table class="table">
      <thead>
        <tr>
          <th>统一社会信用代码</th>
          <th>单位名称</th>
          <th>联系方式</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(u, idx) in units" :key="u.creditCode">
          <td>{{ u.creditCode }}</td>
          <td>{{ u.name }}</td>
          <td>{{ u.contact }}</td>
          <td>
            <button class="link" @click="openEdit(idx)">编辑</button>
            <button class="link danger" @click="remove(idx)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div v-if="modalOpen" class="modal">
      <div class="dialog">
        <h3>{{ editingIndex===-1 ? '新增单位' : '编辑单位' }}</h3>
        <div class="grid">
          <label>统一社会信用代码<input v-model="form.creditCode" placeholder="18位代码" /></label>
          <label>单位名称<input v-model="form.name" placeholder="单位名称" /></label>
          <label>联系方式<input v-model="form.contact" placeholder="电话或邮箱" /></label>
        </div>
        <div class="actions">
          <button @click="modalOpen=false">取消</button>
          <button class="primary" @click="save">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-top: 0; }
h2 { color: var(--primary-blue); margin-bottom: 14px; font-size: 26px; }
.toolbar { margin-bottom: 14px; }
.primary { background: var(--primary-blue); color: #fff; border: none; padding: 12px 18px; border-radius: 6px; cursor: pointer; font-size: 18px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid #eee; text-align: left; font-size: 18px; }
.link { background: transparent; border: none; color: var(--primary-blue); cursor: pointer; font-size: 16px; }
.danger { color: #d32f2f; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: grid; place-items: center; }
.dialog { width: min(640px, 92vw); background: #fff; padding: 20px; border-radius: 12px; }
.grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 10px; }
label { display: grid; gap: 6px; }
input { padding: 12px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 18px; }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
</style>


